<template>
  <div class="chat_commento">
    <!-- top -->
    <div class="chat_top">
      您的专属心里咨询师
    </div>
    <!-- line -->
    <div class="line"></div>
    <!-- middle -->
    <div class="chat_middle" id="chat_middle_item">
      <!-- 左边 -->
      <!--      <div class="chat_left clearfix">-->
      <!--        <div class="chat_left_item_1 ">天乐</div>-->
      <!--        <div class="chat_left_item_2">-->
      <!--          <div class="chat_time">18:57</div>-->
      <!--          <div class="chat_left_content">-->
      <!--            今天吃点啥？-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      &lt;!&ndash;右边 &ndash;&gt;-->
      <!--      <div class="chat_right">-->
      <!--        <div class="chat_right_item_1 ">热巴</div>-->
      <!--        <div class="chat_right_item_2 ">-->
      <!--          <div class="chat_right_time">18:59</div>-->
      <!--          <div class="chat_right_content">-->
      <!--            最近八合里周年庆店，咱们去薅羊毛呀-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!-- l_2 -->
      <!--      <div class="chat_left clearfix">-->
      <!--        <div class="chat_left_item_1 ">天乐</div>-->
      <!--        <div class="chat_left_item_2">-->
      <!--          <div class="chat_time">18:57</div>-->
      <!--          <div class="chat_left_content">-->
      <!--            行收拾一下走吧，早点去排个号-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <!-- line -->
    <div class="line"></div>
    <!-- foot -->
    <div class="chat_foot">
      <!-- context -->
      <textarea class="chat_context" id="chat_context_item" cols="30" rows="10" placeholder="请输入" v-model="textarea1"></textarea>
      <div class="chat_commit" id="button"  @click="commit">发送</div>
    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

let content=''
import http from '../../src/utils/request.js'
export default {
  name: "Chat",
  data() {
    return {
      UserMessage:[{
        role:'user',
        content:'请你扮演心里咨询师？'
      }, {
        role:'assistant',
        content:'好的，我将扮演心理咨询师跟你对话。在接下来的聊天过程中，我将代入这个角色跟你聊天。如果你想退出角色扮演，可以直接让我退出，退出后我将停止扮演角色。 请问你有什么想要聊的？'
      }
      ],
      textarea1:''
    }
  },methods: {
    message(){
      http.get("http://localhost:8080/chat").then(function (respond){
        console.log(respond.data.code)
        if (respond.data.code===0){
          location.href="http://localhost:5173/index"
        }
      })
    },
    commit:async function(){
      sessionStorage.setItem("data",JSON.stringify(this.UserMessage))
      let closestTo1Index=this.$store.state.index
      console.log(closestTo1Index,"开始聊天前获得的表情值")
      let send_message=document.getElementById("chat_middle_item");
      let message=document.getElementById("chat_context_item");
      let str=message.value;
      let date=new Date();
      let hour=date.getHours();
      let mm=date.getMinutes();
      let time=hour+':'+mm;
      let ans=
          '<div class="chat_right_item_2"style="width: 55%;\n' +
          '  height: 100px;\n' +
          '  float: right;\n' +
          '  margin-top: 10px;">'+
          '<div class="chat_right_time clearfix"  style="width: 100%;\n' +
          '  text-align: right;">'+time+'</div>'+
          '<div class="chat_right_content clearfix" style="float: right;\n' +
          '  padding: 15px;\n' +
          '  border-radius: 10px;\n' +
          '  margin-top: 10px;\n' +
          '  border-top-right-radius: 0px;\n' +
          '  background-color: #4F7cff;\n' +
          '  color: white;">'+str+'</div>'
          +'</div>';
      let oLi=document.createElement("div");
      oLi.setAttribute("class","chat_right");
      oLi.innerHTML=ans;
      send_message.append(oLi);
      message.value="";
      console.log(this.textarea1)
      console.log(1111)
      let tpData={
        role:'user',
        content:''
      }
      tpData.content=this.textarea1
      let JsonData=JSON.parse(sessionStorage.getItem("data"))
      JsonData.push(tpData)
      console.log(JsonData,"JsonData")
        http.post('http://127.0.0.1:5000/getResponse',JsonData,{headers: {'index': closestTo1Index}}).then(function (respond){
        let tpData={
          role:'assistant',
          content:''
        }
        tpData.content=respond.data
          console.log(respond.data,"返回的数据")
            let JsonData=JSON.parse(sessionStorage.getItem("data"))
          JsonData.push(respond.data)
        let str=`<div class="chat_left_item_2"style="width: 55%;
  height: 250px;
  float: left;
  margin-top: 10px;">
            <div class="chat_time">${time}</div>
                <div class="chat_left_content"style="padding: 15px;
  margin-top: 10px;
  background-color: #f4f5f7;
  display: inline-block;
  border-radius: 10px;
  border-top-left-radius: 0px;">
                    ${respond.data}
                </div>
            </div>`
        let oLi=document.createElement("div");
        oLi.setAttribute("class","chat_left");
        oLi.innerHTML=str;
        send_message.append(oLi);

      })
    }
  },mounted() {
    this.message()
  },

}
</script>

<style scoped>
.chat_commento{
  width: 450px;
  height: 650px;
  margin: auto;
  border-radius: 10px;
  border: 2px solid #f4f5f7;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
  width: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
/* top */
.chat_top{
  color: #b91f72;
  background-image: url(https://img.syfabiao.com/zb_users/upload/2021/11/20211104113038163599663869493.jpg);
  width: 100%;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-left: 20px;
  font-size: 20px;
  line-height: 50px;
  box-sizing: border-box;
  font-weight: 550;
  border-width: 0px;
}
/* middle */
/* 左边 */
.chat_middle{
  width: 450px;
  height: 455px;
  position: relative;
  box-sizing: border-box;
  overflow: auto;
  border-left: 3px solid #ecebde;
  border-right: 3px solid #ecebde;
  /*background-size: 100% 110%;*/
  /*background-image: url(https://pic1.zhimg.com/v2-8509334f711e2d161d2f0bd6b9fd63e8_r.jpg);*/
}
.chat_left{
  width: 100%;
  height: 120px;
  margin-top: 20px;
}
.chat_left_item_1{
  width: 50px;
  height: 50px;
  background-color: #4459AB;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  line-height: 50px;
  color: white;
  border-radius: 25px;
}
.chat_left_item_2{
  width: 55%;
  height: 100px;
  float: left;
  margin-top: 10px;
}
.chat_left_item_2 .chat_left_chat{
  float: left;
}
.chat_left_item_2 .chat_left_content{
  padding: 15px;
  margin-top: 10px;
  background-color: #f4f5f7;
  display: inline-block;
  border-radius: 10px;
  border-top-left-radius: 0px;
}
/* 右边 */
.chat_right{
  width: 100%;
  height: 120px;
  margin-top: 20px;
}
.chat_right_item_1{
  width: 50px;
  height: 50px;
  background-color: #4459AB;
  float: right;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  line-height: 50px;
  color: white;
  border-radius: 25px;
}
.chat_right_item_2{
  width: 55%;
  height: 100px;
  float: right;
  margin-top: 10px;
}
.chat_right_time{
  width: 100%;
  text-align: right;
}
.chat_right_content{
  float: right;
  padding: 15px;
  border-radius: 10px;
  margin-top: 10px;
  border-top-right-radius: 0px;
  background-color: #4F7cff;
  color: white;
}
/* foot */
.chat_foot{
  width: 450px;
  height: 130px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
}
.chat_context{
  width: 100%;
  height: 100%;
  font-size: 17px;
  box-sizing: border-box;
  outline: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-width: 0px;
  padding: 16px;
}
.chat_commit{
  width: 80px;
  height: 30px;
  color: white;
  background-color: #4F7cff;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  position: absolute;
  right: 10px;
  bottom: 20px;
  margin-right: 10px;
}
.chat_context{
  resize: none;
}
.chat_context::placeholder{
  color: black;
  font-weight: 500;
}
.line{
  width: 100%;
  border-top: 1px;
  border-color: #f4f5f7;
  border-style: solid;
}
</style>